<template>
  <div>
    <!-- 查询和新增表单 -->
    <el-card class="box-card box">
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-row type="flex">
            <el-select v-model="properties.category.id" placeholder="全部经纪">
              <el-option
                v-for="item in categoriesList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>

            <el-select v-model="properties.agent.id" placeholder="全部经纪">
              <el-option
                v-for="item in agentsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-input v-model="title_contains" placeholder="输入关键字" />

            <el-button
              type="primary"
              class="btn"
              @click="screening"
            >查询</el-button>
          </el-row>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-plus"
              @click="addFn"
            >新增</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 房产列表部分12 -->
    <el-card class="box-card box">
      <el-table :data="propertiesList" border style="width: 100%">
        <el-table-column prop="" label="封面" align="center">
          <template v-slot="{ row }">
            <img
              :src="row.image"
              title="点击查看大图"
              class="img"
              @click="previewImg($event)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" align="center" />
        <el-table-column prop="tags" label="标签" align="center" width="220">
          <template v-slot="{ row }">
            <el-tag
              v-for="(item, index) in row.tags"
              :key="index"
              style="margin: 5px"
              type="success"
            >{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center" />
        <el-table-column prop="agent" label="经纪" align="center">
          <template v-slot="{ row }">
            <p>{{ row.agent === null ? "" : row.agent.name }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" align="center" />
        <el-table-column prop="category" label="分类" align="center">
          <template v-slot="{ row }">
            <p>{{ row.category === null ? "" : row.category.title }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="介绍" align="center">
          <template v-slot="{ row }">
            <p :title="row.desc" class="text">{{ row.desc }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="photos" label="图片" width="240" align="center">
          <template v-slot="{ row }">
            <img
              v-for="(item, index) in row.photos"
              :key="index"
              :src="item"
              title="点击查看大图"
              class="img"
              @click="previewImg($event)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center" width="200">
          <template v-slot="{ row }">
            <el-button
              type="danger"
              class="btn"
              @click="delFn(row.id)"
            >删除</el-button>
            <el-button
              type="primary"
              class="btn"
              @click="ediFn(row.id)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-row type="flex" justify="center">
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageConfig._limit"
            @current-change="currentChange"
          />
        </div>
      </el-row>
    </el-card>

    <!-- 图片放大预览 -->

    <el-dialog title="图片预览" :visible.sync="imgVisible">
      <div>
        <img
          ref="imgVisible"
          src=""
          alt=""
          class="img"
          width="300"
          height="300"
        >
      </div>
    </el-dialog>

    <!-- 新增和编辑表单弹框 -->
    <AddEdiForm ref="form" :dialog-visible.sync="dialogVisible" :title="title" />
  </div>
</template>

<script>
// 引入后台数据接口
import {
  getPropertiesList,
  delProperties,
  getAgentsList,
  getCategoriesList,
  getTotal
} from '../../api/properties'
// 引入新增和编辑表单组件
import AddEdiForm from './component/addEdi-form copy.vue'

export default {
  components: {
    AddEdiForm
  },
  data() {
    return {
      pageConfig: {
        _limit: 5, // 每页显示个数
        _start: 0 // 当前页请求数据的起始下标
      },
      title: '新增', // 控制新增和编辑的标题显示
      title_contains: '',
      page: 1, // 当前页
      total: 0, // 数据总条数
      dialogVisible: false, // 控制新增和编辑对话框显示隐藏
      // 房产列表
      imgVisible: false, // 大图预览显示隐藏
      propertiesList: [], // 房产列表
      categoriesList: [], // 分类列表
      agentsList: [], // 经纪列表
      properties: {
        address: '广东省,汕头市,澄海区', // 地址
        // 代理
        agent: {
          address: '', // 地址
          created_at: '', // 创建时间
          desc: '',
          email: '', // 邮箱
          id: '',
          image: '', // 公司图片
          name: '', // 经纪公司名称
          phone: '', // 经纪公司电话
          updated_at: '' // 更新时间
        },
        category: { id: '' }, // 类别
        content: '', // 内容
        created_at: '', // 创建时间
        desc: '', // 介绍
        id: '',
        image: '', // 图片路径
        photos: [], // 照片
        price: '', // 价格
        tags: [], // 标签
        title: '',
        updated_at: '' // 更新时间
      }
    }
  },
  async created() {
    // 获取房产列表
    this.getPropertiesList()
    // 获取房产列表总数
    this.getTotal()
    // 获取分类列表
    const res = await getCategoriesList()
    // 将数据回填给分类列表
    this.categoriesList = res.data
    // 获取经纪列表
    const data = await getAgentsList()
    // 将数据回填给经纪列表
    this.agentsList = data.data
  },
  methods: {
    // 关闭并重置新增和编辑弹框
    reset() {
      this.dialogVisible = false
    },
    // 分页管理触发函数
    async currentChange(newPage) {
      this.page = newPage
      console.log(newPage)
      // 当前下标等于上一页最后下标的后一个, 把页码减一, 乘以每页条数即可
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      this.getTotal()
      this.getPropertiesList()
    },
    // 获取房产列表
    async getPropertiesList() {
      // 调取接口
      const res = await getPropertiesList({
        // 传入起始小标和条数
        ...this.pageConfig,
        // 查询条件可传可不传
        agent: this.properties.agent.id || null,
        category: this.properties.category.id || null,
        // 模糊查询参数
        title_contains: this.title_contains || null
      })
      // 数据保存，用于渲染
      this.propertiesList = res.data
    },
    // 根据条件查询列表
    async screening() {
      await this.getTotal()
      await this.getPropertiesList()
    },
    // 获取房产列表总数
    async getTotal() {
      // 获取列表总数
      const total = await getTotal({
        // 查询条件可传可不传
        agent: this.properties.agent.id || null,
        category: this.properties.category.id || null,
        // 模糊查询参数
        title_contains: this.title_contains || null
      })
      // 将数据数量回填到total
      this.total = total.data
    },
    // 删除房产
    delFn(id) {
      this.$confirm('此操作将永久删除该数据, 并且无法恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await delProperties(id)
          console.log(12, res)
          // 重新渲染
          this.getPropertiesList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 大图预览
    previewImg(e) {
      // // 显示图片预览弹框
      // this.imgVisible = true
      // // 将图片地址赋值给大图预览的地址
      // console.log(e)
      // this.$refs.previewImg.src = e.src
    },
    // 编辑实现弹窗
    ediFn(id) {
      console.log(id)
      // 获取那行数据的id
      this.dialogVisible = true
      this.title = '编辑'
      // 调用子组件方法获取指定房产数据
      this.$refs.form.getProperties(id)
    },
    // 新增实现弹框
    addFn() {
      this.dialogVisible = true
      this.title = '新增'
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 10px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.btn {
  height: 40px;
  padding: 0 10px;
}
.text {
  overflow: hidden; /*超出的部分隐藏起来。*/
  text-overflow: ellipsis; /* 支持 IE */
  display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
  -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
  -webkit-line-clamp: 3; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
}
.img {
  height: 60px;
  width: 60px;
  object-fit: cover; //此属性使用最多
  margin: 5px;
}
</style>
